import { useState } from "react";
import "./assets/App.css";

const App = () => {
  /**
   * useState()函数返回一个数组
   *    - 数组中第一个元素是初始值。直接修改不会触发组件的重新渲染
   *    - 数组中第二个，是一个函数，通常命名为setXXX
   *        这个函数用来修改state，调用其修改state后会触发组件的重新渲染，
   *        并且使用函数中的值作为新的state值。
   *    - 有state值发生变化时，组件才会重新渲染
   *    - setXXX是异步执行的。会等待其他代码执行完后再重新渲染
   *        所以当调用setXXX需要使用旧state的值时，一定要注意有可能出现计算错误的情况（setTimeout中多次执行,state中的值计算错误，现版本已修复）
   */
  let [data, setData] = useState({
    number: 1,
    name: "洪奇奇",
  });
  // console.log(data);
  // console.log(setData);
  const addNum = () => {
    /**  
     * 下列代码只会执行最后一次
     *    setData({ ...data, number: 1 });
          setData({ ...data, number: 2 });
          setData({ ...data, number: 3 });
          setData({ ...data, number: 4 });
          setData({ ...data, number: 5 });
     */
    /**
     * 3s内多次点击，会执行多次渲染，data数据正确。
     */
    // 写法一：
    setTimeout(() => {
      data.number++;
      setData({ ...data, number: data.number });
    }, 3000);
    // 写法二：
    // setTimeout(() => {
    //   setData((prevData) => {
    //     prevData.number++;
    //     return { ...prevData, number: prevData.number };
    //   });
    // }, 3000);
  };
  const lessNum = () => {
    data.number--;
    setData({ ...data, number: data.number });
  };
  const changeName = () => {
    setData({ ...data, name: "洪怪怪" });
  };
  return (
    <div className="content">
      <button onClick={lessNum}>-</button>
      <span>姓名:{data.name}</span>
      <span>{data.number}</span>
      <button onClick={addNum}>+</button>
      <button onClick={changeName}>改名</button>
    </div>
  );
};

export default App;
